<script lang="tsx">
import { defineComponent, onMounted, computed } from 'vue';
import ObsImage from '#/components/obsImage.vue';
import {Eye, UsersRound} from '@vben/icons'
import { formatNumberWithCommas } from '#/utils/formatNumber';
import Empty from '../empty.vue';
interface Props {
  allDynamicsData: any[];
  handleViewDetail: (data: any) => void;
}

export default defineComponent({
  name: 'AllDynamics',
  props: {
    allDynamicsData: {
      type: Array as () => any[],
      default: () => []
    },
    handleViewDetail: {
      type: Function,
      required: true
    }
  },
  setup(props: Props) {

    onMounted(() => {
    });

    const getTotalViews = computed(() => {
      return (data: any) => {
        return formatNumberWithCommas(data.initialViews + data.views);
      }
    });

    const getTotalVisitors = computed(() => {
      return (data: any) => {
        return formatNumberWithCommas(data.initialVisitors + data.visitors);
      }
    });

    return () => (
      <div class="left-column">
        <div class="dynamics-list">
          {console.log(props.allDynamicsData)}
          {props.allDynamicsData && props.allDynamicsData.length > 0 ? (
            props.allDynamicsData.map((item) => (
              <div key={item.id} class="dynamics-item" onClick={() => props.handleViewDetail(item)}>
                <div class="item-image">
                  <ObsImage src={item.img} alt={item.title} imgStyle={{width: '250px', height: '140px'}} />
                </div>
                <div class="item-content">
                  <h3 class="item-title">{item.title}</h3>
                  <p class="item-description" v-html={item.content}></p>
                  <div class="item-meta">
                    <span class="item-date">{item.date}</span>
                    <div class="flex items-center gap-2 text-[14px]">
                      <Eye class="w-[12px] h-[12px] text-[#595959]" />
                      <span class="item-tag">{getTotalViews.value(item)}</span>
                      <UsersRound class="w-[12px] h-[12px] text-[#595959]" />
                      <span class="item-tag">{getTotalVisitors.value(item)}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <Empty />
          )}
        </div>
      </div>
    );
  }
})
</script>

<style scoped>
/* 左侧列样式 */
.dynamics-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dynamics-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}

.dynamics-item:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
  transform: translateY(-2px);
}

.item-image {
  flex-shrink: 0;
  width: 245px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
}

.item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-content {
  flex: 1;
  display: flex;
  padding: 8px;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 18px;
  font-weight: 500;
  color: #191919;
  margin: 0 0 12px 0;
  line-height: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-description {
  font-size: 14px;
  color: #AEAEAE;
  margin: 0 0 18px 0;
  line-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #AEAEAE;
}

.item-date {
  font-size: 14px;
}

.item-tag {
  font-size: 12px;
}


@media (max-width: 768px) {
  .left-column {
    padding: 20px;
  }
  .dynamics-item {
    flex-direction: column;
  }
  
  .item-image {
    width: 100%;
    height: 200px;
  }
}
</style>
